QML基本元素和自定义元素

Posted on | In ,

本文将针对QML基本元素进行讲解

常用基本元素

Item

Item是Qt Quick中所有可视化物体的基本类型，所有可视化物体均继承自该类型。Item不可见，但是他定义了其他可视化物体的基本属性，例如坐标x,y，anchor等等。Item最大的作用就是对对象进行分组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import QtQuick 2.0
// 下面的Item包含了3个Image 对象 和一个用于给Item添加背景的Rectangle对象
Item {
    
    width = 400
    height = 300
    
    Rectangle{
        anchors.fill: parent
        color : "blue"
        border.color: "black"
    }
    
    Image {
        source: "tile.png"
    }
    Image {
        x: 80
        width: 100
        height: 100
        source: "tile.png"
    }
    Image {
        x: 190
        width: 100
        height: 100
        fillMode: Image.Tile
        source: "tile.png"
    }
}

font

QML中的字体类型，用于定义字体

1
2
3
4
5
6
7
8
9
10
Text{
    x : 100
    y : 100
    id: mTextId
    font{
        family: "Helvetica"
        pointSize: 13
        bold: true
    }
}

Image

用于显示图片的element

1
2
3
4
5
6
7
8
Image {
    id: image1Id
    x: 10
    y: 10
    width: 100
    height: 100
    source: "image/bullet.png"   //也可以使用网页URL
}

自定义元素

Column & Row

Column和Row的作用是将元素按列和按行排布

1
2
3
4
5
6
7
8
9
10
11
12
13
Row{
    spacing: 20
    Rectangle{
        width: 300
        height:100
        color: "red"
    }
    Rectangle{
        width: 300
        height: 100
        color: "blue"
    }
}

利用Rectangle创建自定义元素

最常用的用于自定义元素的基本元素就是Rectangle，一个功能完善的使用rectangle制作的按钮如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Rectangle{
    x: 200
    y:200
    height: buttonTextId.implicitHeight + 20
    width: buttonTextId.implicitWidth + 20
    color: "green"
    boarder{color: blue; width: 3}
    Text {
        id: buttonTextId
        anchors.centerIn: parent
        text: qsTr("This is a button")
    }

    MouseArea{
        anchors.fill: parent
        onClicked: {
            console.log("clicked On:" + buttonTextId.text)
        }
    }
}

自定义元素的封装

在我们设计好了自定义元素后，我们可以将其封装至一个独立的文件中，方便下次使用。同时，我们可以对外提供一些接口，方便我们对自定义元素进行配置。我们对上面的按钮进行封装，将其放入一个MButton.qml文件中。同时，我们将其放入一个Item中，可以向用户隐藏一些属性，例如此时用户无法修改MButton的颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// MButton.qml
import QtQuick 2.11

Item{
    id: rootId
    // 提供接口，方便外部使用者修改元素，例如我们将buttonText和buttonTextId.text进行绑定，从而可以修改button的文本
    width: containerRectId.width
    height: containerRectId.height
    property alias buttonText: buttonTextId.text
    signal buttonClicked     //通过信号让用户自定义button的行为
    
    Rectangle{
        
        id: containerRectId
        height: buttonTextId.implicitHeight + 20
        width: buttonTextId.implicitWidth + 20
        color: "green"
        boarder{color: blue; width: 3}
        Text {
            id: buttonTextId
            anchors.centerIn: parent
            text: qsTr("This is a button")
        }

        MouseArea{
            anchors.fill: parent
            onClicked: {
                rootId.buttonClicked()
            }
        }
    }
}

现在我们可以在其他的qml中调用MButton，需要注意要正确提供MButton的路径，使用方式如下：

1
2
3
4
5
6
MButton{
    buttonText: "Button1"
    onButtonClicked: {    //触发signal
        console.log("clicked on button 1 from main qml")
    }
}
0%